<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tabbar选项卡</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <div id="border">
        <div id="tab">
            <ul id="tab-list">
                <li>公告</li>
                <li class="current-tab">规则</li>
                <li>论坛</li>
                <li>安全</li>
                <li>公益</li>
            </ul>
        </div>
        <div id="content">
            <div class="dom" style="display: inline-block;">
                <ul class="content-list">
                    <li><a href="#">这是公告的数据1</a></li>
                    <li><a href="#">这是公告的数据2</a></li>
                    <li><a href="#">这是公告的数据3</a></li>
                    <li><a href="#">这是公告的数据4</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul class="content-list">
                    <li><a href="#">这是规则的数据1</a></li>
                    <li><a href="#">这是规则的数据2</a></li>
                    <li><a href="#">这是规则的数据3</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul class="content-list">
                    <li><a href="#">这是论坛的数据1</a></li>
                    <li><a href="#">这是论坛的数据2</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul class="content-list">
                    <li><a href="#">这是安全的数据1</a></li>
                    <li><a href="#">这是安全的数据2</a></li>
                    <li><a href="#">这是安全的数据3</a></li>
                </ul>
            </div>
            <div class="dom">
                <ul class="content-list">
                    <li><a href="#">这是公益的数据1</a></li>
                    <li><a href="#">这是公益的数据2</a></li>
                    <li><a href="#">这是公益的数据3</a></li>
                    <li><a href="#">这是公益的数据4</a></li>
                </ul>
            </div>
        </div>
    </div>

    <script src="js/index.js"></script>
</body>
</html>